<template>
	<view>
		<u-navbar title="寻找订单" fixed placeholder bgColor="transparent" @rightClick="rightClick" :autoBack="true" > </u-navbar>
		<view style="width: 750rpx;height: 630rpx;background: linear-gradient( 180deg, #BAEECC 0%, rgba(38,211,96,0) 100%);position: absolute;top: 0;z-index: -1;"></view>
		<view style="width: 690rpx;height: 316rpx;background: #FFF;border-radius: 20rpx;margin: 0 auto;box-sizing: border-box;padding: 0 30rpx">
			<view style="height: 110rpx;display: flex;align-items: center;padding: 0 10rpx;border-bottom: 1rpx solid #F9F9F9;">
				<view style="width: 12rpx;height: 12rpx;border-radius: 50%;background-color: #26D360;margin-right: 10rpx;"></view>
				<view style="color: #797979;margin-right: 30rpx;flex-shrink: 0;">出发地</view>
				<view style="color: #333333;">{{tailwindQdInfo.city}}</view>
				<!-- <image src="/static/common/arrow.png" style="width: 24rpx;height: 24rpx;margin-left: auto;"></image> -->
			</view>
			<view style="height: 110rpx;display: flex;align-items: center;padding: 0 10rpx;border-bottom: 1rpx solid #F9F9F9;">
				<view style="width: 12rpx;height: 12rpx;border-radius: 50%;background-color: #FCC717;margin-right: 10rpx;"></view>
				<view style="color: #797979;margin-right: 30rpx;flex-shrink: 0;">目的地</view>
				<view style="color: #333333;">{{tailwindZdInfo.city}}</view>
				<!-- <image src="/static/common/arrow.png" style="width: 24rpx;height: 24rpx;margin-left: auto;"></image> -->
			</view>
			<view style="height: 92rpx;display: flex;align-items: center;">
				<view style="display: flex;align-items: center;flex: 1;padding-right: 10rpx;" @click="timePopup=true">
					<image src="/static/index/4.png" style="width: 28rpx;height: 28rpx;"></image>
					<view style="margin-left: 12rpx;color: ;">{{params.showTime?params.showTime:'请选择时间'}}</view>
					<image src="/static/common/arrow.png" style="width: 24rpx;height: 24rpx;margin-left: auto;"></image>
				</view>
				<view style="width: 1rpx;height: 44rpx;background: #F9F9F9;"></view>
				<view style="display: flex;align-items: center;flex: 1;padding-right: 10rpx;" @click="personPopup=true">
					<image src="/static/index/4.png" style="width: 28rpx;height: 28rpx;margin-left: 20rpx;"></image>
					<view style="margin-left: 12rpx;color: ;">{{params.seating?params.seating+'人':'请选择人数'}}</view>
					<image src="/static/common/arrow.png" style="width: 24rpx;height: 24rpx;margin-left: auto;"></image>
				</view>
			</view>
		</view>
		<!-- <view style="display: flex;align-items: center;height: 112rpx;">
			<view style="color: #797979;font-size: 30rpx;text-align: center;flex: 1;" :class="params.sort==item.sort?'active':''" v-for="item,index in tabs" :key="index" @click="changeTabs(item.sort)">{{item.name}}</view>
		</view> -->
		<!-- lobbyList -->
		<view v-for="(item,index) in lobbyList" :key="index">
			<view class="item">
				<view class="flex-row-space-between" style="padding:30rpx 24rpx ;padding-bottom: 0;">
					<view class="flex-row-flex-start">
						<image class="icon" :src="item.driver_avatar" mode=""></image>
						<view class="">
							<view class="name">
								{{item.driver_name}}
							</view>
							<view class="brand">
								{{item.brand}} {{item.license_plate_number}}
							</view>
						</view>
					</view>
					<view class="time">
						{{item.departuretime}}
					</view>
				</view>
				<view class="line">
					
				</view>
				<view class="" style="margin:0 30rpx;">
					<view class="flex-row-flex-start" style="margin-top: 14rpx;">
						<image class="qdImage" src="/static/common/qd.png" mode=""></image>
						<view class="sItem2City">
							{{item.startlocation}}
						</view>
					</view>
					<view class="flex-row-space-between" style="margin-top: 14rpx;">
						<view class="flex-row-flex-start" >
							<image class="qdImage" src="/static/common/zd.png" mode=""></image>
							<view class="sItem2City">
								{{item.endlocation}}
							</view>
						</view>
						<view class="sItem2Price">
							<text style="font-weight:bold">¥{{item.total_price}}</text>
							<text style="font-size: 24rpx;">/位</text>
						</view>
					</view>

					
				</view>
				<view class="line" style="margin-bottom: 16rpx;">
					
				</view>
				<view class="flex-row-space-between" style="margin:0 30rpx;">
					<view class="num">
						<text>剩余</text>
						<text class="baseColor">{{item.vacantseat}}</text>
						<text>个位</text>
					</view>
					<view class="flex-row-flex-end">
						<view @click="toCarSharing(item,1)" class="button1 flex-row-center">
							代朋友叫
						</view>
						<view @click="toCarSharing(item,0)" class="button flex-row-center">
							预定
						</view>
					</view>
					
				</view>
				
				
			</view>
		</view>
		
		
		
		<uni-load-more :status="loadingStatus" :content-text="contentText" />
		
		<u-datetime-picker
			ref="datetimePicker"
		    :show="timePopup"
		    v-model="startTime"
		    :minDate="minDate"
		    mode="datetime"
			@cancel="timePopup=false"
			@confirm="confirmTime"
		></u-datetime-picker>
		
		<u-picker :show="personPopup" :columns="personList" @cancel="personPopup=false" @confirm="confirmPerson"></u-picker>
		
		
		
	</view>
</template>

<script>
	import { lobby } from '@/api/index.js'
	export default{
		data(){
			return{
				tabs:[{name:'默认选择',sort:0},{name:'价格最低',sort:1},{name:'时间最近',sort:2}],
				tabs_index:0,
				timePopup:false,
				startTime:Number(new Date()),
				minDate: Date.now(),
				maxDate:'',
				personPopup:false,
				personList:[
					['1人','2人','3人','4人','5人','6人','7人']
				],
				params:{
					start_id:'',
					end_id:'',
					time:'',
					seating:'',
					sort:0,
					page:1,
					limit:10
				},
				showTime:'',
				tailwindQdInfo:{},
				tailwindZdInfo:{},
				lobbyList:[],
				loadingStatus:'loading',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有数据了'
				},
			}
		},
		onShow() {
			this._init_data()
		},
		onLoad(options) {
			this.tailwindQdInfo = JSON.parse(options.tailwindQdInfo)
			this.tailwindZdInfo = JSON.parse(options.tailwindZdInfo)
			this.params.start_id = this.tailwindQdInfo.id
			this.params.end_id = this.tailwindZdInfo.id
			
		},
		onReady() {
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		onReachBottom() {
			if(this.loadingStatus!='noMore'){
				this.params.page++
				this.lobby()
			}
		},
		methods:{
			changeTabs(sort){
				this.params.sort = sort
				this._init_data()
			},
			// 去拼车
			toCarSharing(item,type){
				
				item.start_city=this.tailwindQdInfo.city
				item.end_city=this.tailwindZdInfo.city
				item.type=type
				// const pay_params = {
				// 	order_id:item.id,
				// 	start_city:this.tailwindQdInfo.city,
				// 	start_lng:this.tailwindQdInfo.longitude,
				// 	start_lat:this.tailwindQdInfo.latitude,
				
				// 	start_address:this.tailwindQdInfo.address,
				// 	end_city:this.tailwindQdInfo.city,
				// 	end_lng:this.tailwindZdInfo.longitude,
				// 	end_lat:this.tailwindZdInfo.latitude,
				// 	end_address:this.tailwindZdInfo.address,
				// 	time:item.departuretime,
				// 	vacantseat:item.vacantseat,
				// 	remark:item.remark,
				// 	driver_avatar:item.driver_avatar,
				// 	driver_name:item.driver_name,
				// 	price:item.price
				// }
				uni.navigateTo({
					url:'/pages/index/carSharing?pay_params='+JSON.stringify(item)
				})
			},
			//确定选择时间
			confirmTime(e){
				this.params.showTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM')
				this.timePopup = false
				this._init_data()
			},
			// 确定选择人数
			confirmPerson(e){
				const value = e.value[0]
				if(value=='1人'){
					this.params.seating = 1
				}else if(value=='2人'){
					this.params.seating = 2
				}else if(value=='3人'){
					this.params.seating = 3
				}else if(value=='4人'){
					this.params.seating = 4
				}
				else if(value=='5人'){
					this.params.seating = 5
				}
				else if(value=='6人'){
					this.params.seating = 6
				}
				else if(value=='7人'){
					this.params.seating = 7
				}
				this.personPopup = false
				this._init_data()
			},
			formatter(type, value) {
			    if (type === 'year') {
			        return `${value}年`
			    }
			    if (type === 'month') {
			        return `${value}月`
			    }
			    if (type === 'day') {
			        return `${value}日`
			    }
				if (type === 'hour') {
				    return `${value}时`
				}
				if (type === 'minute') {
				    return `${value}分`
				}
			    return value
			},
			//初始化
			_init_data(){
				this.params.page = 1
				this.loadingStatus = 'loading'
				this.lobby()
			},
			//选单大厅列表
			async lobby(){
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.params.time = JSON.stringify(this.params.showTime)
				const res = await lobby(this.params)
				uni.hideLoading()
				if (res.code != 1) return
				if(this.params.page==1){
					this.lobbyList = res.data.data
				}else{
					this.lobbyList = this.lobbyList.concat(res.data.data)
				}
				this.loadingStatus = res.data.current_page<res.data.last_page?'loading':'noMore'
			}
		}
	}
</script>

<style>
	page{
		background: #F9F9F9;
	}
	.active{
		color: #333333!important;
		font-weight: bold!important;
	}
	.item{
		padding-bottom: 16rpx;
		margin: 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
	.icon{
		margin-right: 4rpx;
		border-radius: 50%;
		width: 56rpx;
		height: 56rpx;
	}
	.name{
		font-family: PingFang SC, PingFang SC;
		font-weight: 550;
		font-size: 28rpx;
		color: #333333;
	}
	.brand{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #797979;
	}
	.time{
		font-family: PingFang SC, PingFang SC;
		font-weight: 550;
		font-size: 28rpx;
		color: #26D360;
	}
	.line{
		margin: 24rpx 0;
		height: 2rpx;
		background: #F9F9F9;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	.sItem2City{
		margin-left: 6rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 550;
		font-size: 28rpx;
		color: #333333;
		
	}
	.sItem2Price{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 40rpx;
		color: #FF5757;
	}
	.num{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #797979;
	}
	.button{
		width: 136rpx;
		height: 52rpx;
		background: #FF8349;
		border-radius: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
	}
	.button1{
		margin-right: 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		padding: 0 20rpx;
		height: 52rpx;
		border-radius: 26rpx;
		border: 2rpx solid #EEEEEE;
	}
</style>